﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <canvas id="Circle"></canvas>
    
    <script type="text/javascript">
        var canvas = document.getElementById('Circle');
        var context = canvas.getContext('2d');
        var centerX = canvas.width / 2;
        var centerY = canvas.height / 2;
        var radius = 50;

        var full = radius * 2;
        var amount = 0;
        var amountToIncrease = 10;

        function draw() {
            context.save();
            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.clip(); // Make a clipping region out of this path
            // instead of filling the arc, we fill a variable-sized rectangle
            // that is clipped to the arc
            context.fillStyle = '#13a8a4';
            // We want the rectangle to get progressively taller starting from the bottom
            // There are two ways to do this:
            // 1. Change the Y value and height every time
            // 2. Using a negative height
            // I'm lazy, so we're going with 2
            context.fillRect(centerX - radius, centerY + radius, radius * 2, -amount);
            context.restore(); // reset clipping region

            context.beginPath();
            context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
            context.lineWidth = 10;
            context.strokeStyle = '#000000';
            context.stroke();

            // Every time, raise amount by some value:
            amount += amountToIncrease;
            if (amount > full) amount = 0; // restart
        }

        draw();
        // Every second we'll fill more;
        setInterval(draw, 1000);
    </script>
</body>
</html>
